[CSS] :nth-child() 선택자에 대한 CSS 적용방법, 홀수 및 짝수번째 요소 선택

스크린샷) 빨간 점선은 홀수번째 배경만 스타일은 부여하였음

# css 원하는 순서 및 홀수, 짝수에만 스타일

css를 사용하여 스타일을 부여하는 경우 몇 번째 또는 홀수나 짝수에만 스타일을 추가하고 싶은 경우가 있습니다. 어떻게해야할까요?

이 경우 매우 유용한 선택자 방법으로 특정 순번이나 홀수, 짝수 요소에만 스타일을 부여하는 nth-child() 속성을 사용할 수 있습니다. 이 방법을 사용하여 게시판에서 일부 리스트에만 스타일을 줄 때도 많이 사용됩니다.

Element:nth-child(선택될 위치값)
Ex) p:nth-child(2n-1) { style code }

사용방법은 위와 같이 특정 요소의 css선택자에 :nth-child()를 추가합니다. 그럼 아래 예제를 참고하세요.

# nth-child() 속성 예제보기

우선 아래와 같은 소스코드가 있다고 생각해보겠습니다.

연속된 p태그 5개가 보이시죠? 그럼 하나하나 적용해 볼까요? 아래는 아직 아무 스타일도 적용하지 않은 페이지의 모습입니다.

@ 적용되지 않은 모습

보시는 것처럼 아무런 스타일도 없습니다. 그럼 아래부터는 각각 다른 스타일을 적용해보도록 하겠습니다.

---

# 2n번째에 해당하는 모든 p태그에 적용 이번에는 2n번째에 해당하는 엘리먼트에 스타일을 추가하여 빨간색으로 표시해보겠습니다.

위 코드를 실행하면 아래와 같은 결과입니다.

---

! 홀수번째 엘리먼트에 적용

홀수번째 에만 스타일을 추가하는 방법을 알아봅니다. 아래의 css에서는 odd 값을 사용하여 홀수번에만 스타일이 추가됩니다.

코드를 실행할 경우 아래와 같이 홀수번째만 적용되어 출력됩니다.

---

! 짝수번째 엘리먼트에 적용

이번에는 홀수가 아닌 짝수번째에만 스타일을 지정하는 방법입니다. 아까와는 다르게 even 값을 사용합니다.
코드를 수행하면 결과는 아래와 같이 짝수번째에만 적용되어 나타납니다.

---

! 3번째 해당하는 엘리먼트에 적용

이번에는 3번째 해당하는 엘리먼트에만 적용합니다.
코드 실행시 아래와 같이 스타일이 적용됩니다.

---

!!!!! 3n+2번째에 해당하는 요소에 적용
만약 3n+2에만 스타일을 적용하려면? 아래와 같이 css를 추가합니다.
코드의 실행결과는 아래와 같습니다.

---

! 처음부터 n번째까지 스타일을 적용 만약 처음부터 원하는 순번 n에 해당하는 위치까지 동일한 스타일 적용이 필요하다면 어떻게해야할까요? 이때는 마이너스를 기호를 사용하여 -n을 입력합니다. 아래 예제는 처음, 즉 위에서부터 3번째까지의 행에만 스타일을 적용한 예제입니다.

위 코드의 실행결과는 아래입니다.

# nth-child() 적용시 주의할 점은?

해당하는 태그안에 다른 태그가 존재할 경우 nth-child() 속성은 적용되지 않습니다. 예를 들어 3번째 p태그에만 속성을 지정하고 싶은데...
위와 같이 서로 이웃하는 p태그 이외의 h2태그가 존재하는 경우 해당 속성은 적용이 되지 않는 점... 꼭 잊지 마세요! 하지만 이와 무관하게 스타일 지정이 가능한 방법이 있습니다. 바로 nth-of-type() 입니다.
@ 속성 선택자를 사용하여 스타일 추가하는 방법 >
http://webisfree.com/2014-01-14/[css]-속성-선택자를-사용해-특정-속성을-가진-요소에-스타일-부여방법